<template>
	<div class="system_depart_manage">
		<div class="sw_depart_manage">
			<div class="head">
				<h4 @click="handleSelectDepart()">顶级院系</h4>
				<el-button size="medium" type="text" icon="el-icon-plus" v-hasPermi="'6bfd84b607874106ad5fb41dd0dc3ba3'" @click="handleOpenDialog('add')">新增院系</el-button>
			</div>
			<el-tree ref="tree" :data="tableData" v-bind="bindTree" @node-click="handleSelectDepart">
				<dl class="node" slot-scope="{ node, data }">
					<dt :title="data.name">{{ data.name }}</dt>
					<dd>
						<el-button type="text" size="medium" v-hasPermi="'6bfd84b607874106ad5fb41dd0dc3ba3'" @click="handleOpenDialog('addSub', data)">添加子级</el-button>
						<el-button type="text" size="medium" v-hasPermi="'d32ebb3f9f744a54b9ff2342782e1b23'" @click="handleOpenDialog('edit', data)">编辑</el-button>
						<el-button type="text" size="medium" v-hasPermi="'f5b3eb003d314ed082032058ef09dd4d'" @click="handleDeleteData(data)">删除</el-button>
					</dd>
				</dl>
			</el-tree>
		</div>
		<div class="sw_userbox_wrapper">
			<!-- <div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog('add')">选择用户</el-button>
			</div> -->
			<div class="sw_table_container" v-loading="loading">
				<el-table size="medium" :data="userListData" height="100%" class="index_table_wrapper">
					<el-table-column prop="userName" label="用户姓名" min-width="120"></el-table-column>
					<el-table-column prop="account" label="用户账号" min-width="150"></el-table-column>
					<el-table-column prop="createName" label="创建人" min-width="100"></el-table-column>
					<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				</el-table>
			</div>
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryUserListData"></sw-pagination>
		</div>
		<depart-form v-model="departDialog" :depart-list="tableData" :depart-data="departData" @refresh="getTabelData"></depart-form>
	</div>
</template>

<script>
import departForm from './form';
import { getUserList } from '@/api/system/tbSysUser';
import { getDepartListData, deleteDepart } from '@/api/system/tbSysDept';
export default {
	components: { departForm },
	data() {
		return {
			loading: false,
			tableData: [],
			departDialog: false,
			departData: {},
			checkedDepart: '',
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			userListData: [],
			userData: {},
			detailDialog: false,
			bindTree: {
				nodeKey: 'id',
				highlightCurrent: true,
				defaultExpandAll: true,
				expandOnClickNode: false,
				props: { children: 'children', label: 'name' }
			}
		};
	},
	watch: {
		checkedDepart: {
			handler(val) {
				this.queryUserListData();
			},
			immediate: true
		}
	},
	mounted() {
		this.getTabelData();
	},
	methods: {
		//获取表格数据
		async getTabelData() {
			let result = await getDepartListData().then((res) => res.data);
			if (result.code === '0') {
				this.tableData = this.$flatToTree(result.data || [], 'pid');
			}
		},

		//获取用户数据
		async getUserListData() {
			let params = { ...this.queryData, deptId: this.checkedDepart };
			let result = await getUserList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.userListData = !result.data ? [] : result.data;
			}
		},

		queryUserListData() {
			this.loading = true;
			this.getUserListData();
		},

		handleSelectDepart(data) {
			if (!data) {
				this.checkedDepart = '';
				this.$refs['tree'].setCurrentKey(null);
			} else {
				this.checkedDepart = data.id;
			}
		},

		//打开表单
		handleOpenDialog(type, data) {
			this.departDialog = true;
			this.departData = { type, data };
		},

		//删除数据
		handleDeleteData(row) {
			let that = this;
			that.$confirm(`此操作将删除部门<font color="#f00">【${row.name}】</font>, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(row);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除数据请求
		async deleteDataRequest(row) {
			let result = await deleteDepart(row.id).then((res) => res.data);
			if (result.code === '0') {
				this.getTabelData();
				this.$showCustomMessage('success', `删除院系成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.system_depart_manage {
	display: flex;
	align-items: flex-start;
	height: 100%;
	background-color: #fff;

	.el-tree::v-deep {
		.el-tree-node__content {
			height: 36px;
		}
		.el-tree-node__expand-icon {
			font-size: 18px;
			padding: 3px;
		}
	}
}

.sw_depart_manage {
	display: flex;
	flex-direction: column;
	width: 36%;
	min-width: 300px;
	height: 100%;
	padding: 7px 0 0px 16px;
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 16px;
		flex-shrink: 0;

		h4 {
			cursor: pointer;
		}
	}

	.el-tree {
		flex: 1;
		padding-bottom: 6px;
		overflow: auto;
	}

	dl.node {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		overflow: hidden;

		dt {
			flex: 1;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-right: 10px;
		}

		dd {
			flex-shrink: 0;
		}
	}
}

.sw_userbox_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;

	.button {
		margin-bottom: 10px;
	}

	.sw-pagination {
		margin-top: 0;
		padding: 10px;
	}
}
</style>
